<template>
  <div class="app-container">
    <bread parentPathText="数据概念" currentPathText="广陈社区" />
    <div class="app-content">
      <div class="top">
        <div class="item">
          <el-card
            class="box-card"
            :style="{ height: 5.4 * $store.state.radomRate + 'rem' }"
          >
            <div class="head">
              <div class="title">
                <img src="../assets/t.png" alt="" class="img" :style="{ height: 0.38 * $store.state.radomRate + 'rem' }">
                <span>社区概况</span>
              </div>
              <el-button type="text" icon="el-icon-edit" @click="modify"
                >修改</el-button
              >
            </div>

            <el-scrollbar
              :style="{ height: 4.3 * $store.state.radomRate + 'rem' }"
            >
              <div class="con" style="padding: 0 10px 0 5px">
                {{ communityIntroduce }}
              </div>
            </el-scrollbar>
          </el-card>
        </div>
        <div class="item">
          <el-card
            class="box-card"
            :style="{ height: 5.4 * $store.state.radomRate + 'rem' }"
          >
            <div class="head">
              <div class="title">
                <img src="../assets/t.png" alt="" class="img" :style="{ height: 0.38 * $store.state.radomRate + 'rem' }">
                <span>社区要闻</span>
              </div>
            </div>

            <ul
              class="news"
              :style="{ height: 5 * $store.state.radomRate + 'rem' }"
            >
              <li v-for="(item, index) in newsLists" :key="index">
                <el-image
                  :src="item.imgPath"
                  class="img"
                  :style="{ height: 1.8 * $store.state.radomRate + 'rem' }"
                ></el-image>
                <div class="right">
                  <div class="t">
                    <span class="ellipsis1">{{ item.title }}</span>
                    <el-button type="text" @click="goToDetail(item)"
                      >查看详情</el-button
                    >
                  </div>
                  <div class="desc ellipsis2">
                    {{ item.titleContent }}
                  </div>
                </div>
              </li>
            </ul>
          </el-card>
        </div>
        <div class="item">
          <el-card
            class="box-card"
            :style="{ height: 5.4 * $store.state.radomRate + 'rem' }"
          >
            <div class="head">
              <div class="title">
                <img src="../assets/t.png" alt="" class="img" :style="{ height: 0.38 * $store.state.radomRate + 'rem' }">
                <span>巡查记录</span>
              </div>
            </div>
            <el-scrollbar
              :style="{ height: 4.3 * $store.state.radomRate + 'rem' }"
            >
              <table>
                <thead>
                  <tr>
                    <th>巡查人员</th>
                    <th>巡查地点</th>
                    <th>巡查时间</th>
                  </tr>
                </thead>
                <tr v-for="(item, index) in checkList" :key="index">
                  <td><span></span>{{ item.inspectUserName }}</td>
                  <td>{{ item.miniGridName }}</td>
                  <td>{{ item.createTime }}</td>
                </tr>
              </table>
            </el-scrollbar>
          </el-card>
        </div>
      </div>
      <div class="bottom">
        <div class="slot">
          <el-card
            class="box-card"
            :style="{ height: 4.25 * $store.state.radomRate + 'rem' }"
          >
            <div class="head">
              <div class="title">
                <img src="../assets/t.png" alt="" class="img" :style="{ height: 0.38 * $store.state.radomRate + 'rem' }">
                <span>环境整治</span>
              </div>
            </div>
            <div class="info-box">
              <div>
                <div class="top">
                  <div class="item">
                    <el-image
                      :src="inspectInfo.beforeImg"
                      class="img"
                    >
                    <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline">暂无图片</i></div>
                    </el-image>
                    <div>发布时间：{{ inspectInfo.createTime }}</div>
                  </div>
                  <div class="item" >
                    <el-image :src="inspectInfo.afterImg" class="img"
                      >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline">暂无图片</i></div>
                      </el-image>
                    <div>办结时间：{{inspectInfo.completeTime}}</div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="item">
                    点位名称：{{ inspectInfo.miniGridName }}
                  </div>
                  <div class="item">
                    整改人员：{{ inspectInfo.changeUserName }}
                  </div>
                  <div class="item">
                    整治情况：{{ inspectInfo.statusStr }}
                  </div>
                  <div class="item">
                    审 批 人：{{ inspectInfo.approveUserName }}
                  </div>
                  <div class="item">
                    巡 查 员：{{ inspectInfo.inspectUserName }}
                  </div>
                  <div class="item">
                    审批时间：{{ inspectInfo.approveTime }}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="slot">
          <el-card
            class="box-card"
            :style="{ height: 4.25 * $store.state.radomRate + 'rem' }"
          >
            <div class="head">
              <div class="title">
                <img src="../assets/t.png" alt="" class="img" :style="{ height: 0.38 * $store.state.radomRate + 'rem' }">
                <span>社区垃圾分类情况(kg)</span>
              </div>
            </div>
            <chart6 />
          </el-card>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%">
      <el-input
        type="textarea"
        :autosize="{ minRows: 5 }"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
        append-to-body
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import chart6 from "../components/chart6.vue";
export default {
  components: {
    chart6,
  },
  data() {
    return {
      dialogVisible: false,
      communityIntroduce: "",
      textarea: "",
      newsLists: [],
      checkList: [],
      inspectInfo: {
        beforeImg: "",
        afterImg: "",
        approveTime: "",
        approveUserName: "",
        changeUserName: "",
        miniGridName: "",
        completeTime: "",
        createTime: "",
        inspectUserName: "",
        statusStr: "",
      },
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.cDetail(); // 社区详情
    this.newsList(); // 新闻列表
    this.typeList(); // 巡查安排
    this.getNewestInspectDetails(); // 新巡查数据详情(环境整治)
  },
  methods: {
    cDetail() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.detail, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.communityIntroduce = res.data.data.communityIntroduce;
        })
        .catch(() => {});
    },
    newsList() {
      let params = {
        time: this.time,
        status: true,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.newsList, {
          time: this.time,
          status: true,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.newsLists = res.data.data.splice(0, 2);
        })
        .catch(() => {});
    },
    typeList() {
      let params = {
        time: this.time,
        pageSize: 7,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.list, {
          time: this.time,
          pageSize: 7,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.checkList = res.data.data.list;
        })
        .catch(() => {});
    },
    getNewestInspectDetails() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.getNewestInspectDetails, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.inspectInfo.beforeImg = res.data.data.beforeImg;
          this.inspectInfo.afterImg = res.data.data.afterImg;
          this.inspectInfo.approveTime = res.data.data.approveTime;
          this.inspectInfo.approveUserName = res.data.data.approveUserName;
          this.inspectInfo.changeUserName = res.data.data.changeUserName;
          this.inspectInfo.miniGridName = res.data.data.miniGridName;
          this.inspectInfo.completeTime = res.data.data.completeTime;
          this.inspectInfo.createTime = res.data.data.createTime;
          this.inspectInfo.inspectUserName = res.data.data.inspectUserName;
          this.inspectInfo.statusStr = res.data.data.statusStr;
        })
        .catch(() => {});
    },
    goToDetail(item) {
      if (!item.newsUrl) {
        this.$router.push(`/newsDetail?id=${item.id}`);
      } else {
        window.open(item.newsUrl,"_blank");
        // location.href = item.newsUrl;
      }
    },
    modify() {
      this.dialogVisible = true;
      this.textarea = this.communityIntroduce;
    },
    confirm() {
      let params = {
        time: this.time,
        communityIntroduce: this.textarea,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.addOrUpdate, {
          time: this.time,
          communityIntroduce: this.textarea,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.dialogVisible = false;
          this.msgSuccess("修改成功");
          this.cDetail();
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.app-container {
  background: #f5f5f5;
  height: 100vh;
  .top {
    display: flex;
    justify-content: space-between;
    .item {
      width: 32.5%;
      .box-card {
        width: 100%;
        .con {
          margin-top: 0.2rem;
          line-height: 0.28rem;
          text-align: justify;
        }
        .news {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          li {
            display: flex;
            .img {
              width: 4rem;
            }
            .right {
              width: 4.2rem;
              margin-left: 0.2rem;
            }
            .t {
              color: #333;
              font-size: 0.16rem;
              font-weight: bold;
              line-height: 0.28rem;
              display: flex;
              justify-content: space-between;
              span {
                display: inline-block;
                width: 2.1rem;
              }
            }
            .desc {
              margin-top: 0.1rem;
              line-height: 0.24rem;
            }
          }
        }
        table {
          width: 100%;
          margin-top: 0.2rem;
          position: relative;
          thead {
            background: #f8f8f9;
          }
          tr {
            height: 40px;
            line-height: 40px;
            td {
              text-align: center;
              &:first-child span {
                content: "";
                display: inline-block;
                width: 8px;
                height: 8px;
                background: #fb765e;
                border-radius: 50%;
                margin-right: 0.08rem;
              }
              &:nth-child(1),&:nth-child(2){
                width:25%;
              }
              &:nth-child(2){
                width:50%;
              }
            }
            &:nth-child(2n) {
              td {
                &:first-child span {
                  background: #fb765e;
                }
              }
            }
            &:nth-child(2n + 1) {
              td {
                &:first-child span {
                  background: #53a0f9;
                }
              }
            }
            &:nth-child(3n) {
              td {
                &:first-child span {
                  background: #1cd7ff;
                }
              }
            }
          }
        }
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
    .slot {
      width: 49%;
    }
    .info-box {
      display: flex;
      justify-content: space-between;
      margin-top: 0.1rem;
      .top {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 50%;
        }
      }
      .bottom {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 50%;
          margin-bottom: 0.05rem;
        }
      }
      .img {
        width: 90%;
        height: 1.7rem;
        margin-bottom: 0.05rem;
      }
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
        position: relative;
        .img{
          width: 2.47rem;
        }
        span {
          position: absolute;
          left:0.2rem;
          top:-10%;
          font-size:0.22rem;
        }
    }
  }
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>